<template>
  <div class="set-all-con">
    <div class="text-con">
      <span>模块名称:</span>
      <input type="text" v-model="freeStyle.moduleName" placeholder="输入您的内容" />
      <el-checkbox v-model="freeStyle.checked">显示</el-checkbox>
    </div>
    <div class="text-con" style="padding-left:14px">
      <span>副标题:</span>
      <input type="text" v-model="freeStyle.subhead" placeholder="输入您的内容" />
      <el-checkbox v-model="freeStyle.subheadIpt">显示</el-checkbox>
    </div>
    <div class="text-con" style="padding-left:24px;">
      <span>背景:</span>
      <el-color-picker
        class="mycolor"
        size="small"
        v-model="customobj.color"
        show-alpha
        :predefine="customobj.predefineColors"
      ></el-color-picker>
    </div>
    <div class="opaqueness">
      <span>不透明度:</span>
      <div class="set-opaq">
        <span>100%</span>
        <div class="set-opaq-right">
          <i class="el-icon-arrow-up"></i>
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>
    </div>
    <div class="opaqueness" style="margin-top:10px">
      <span>上传图片:</span>
      <img class="upimg" src="@/assets/config_images/addimg.png" alt />
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import "./diyset.scss";
export default {
  computed: {
    ...mapGetters(["freeStyle"])
  },
  data() {
    return {
      checked: true,
      subhead: true,
      customobj: {
        textcon: "",
        color: "rgba(0, 206, 209, 1)",
        predefineColors: [
          "#ff4500",
          "#ff8c00",
          "#ffd700",
          "#90ee90",
          "#00ced1",
          "#1e90ff",
          "#c71585",
          "rgba(255, 69, 0, 0.68)",
          "rgb(255, 120, 0)",
          "hsv(51, 100, 98)",
          "hsva(120, 40, 94, 0.5)",
          "hsl(181, 100%, 37%)",
          "hsla(209, 100%, 56%, 0.73)",
          "#c7158577"
        ]
      }
    };
  },
  watch: {
    freeStyle: {
      handler(oldVal, newVal) {
        // 更新vuex里面的PageJSON
        this.$store.dispatch("apply/PageJSONUpData");
        // 更新父组件中的PageJSON
        this.$emit("updataNowPageJSON", newVal);
      },
      deep: true
    }
  }
};
</script>
<style lang="scss" scoped>
@import "./diyset.scss";
.set-all-con {
  width: 100%;
  height: 100%;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  .text-con {
    @include flexCon(330px, 50px, center, space-between, 40px);
    position: relative;
    justify-content: left;
    input {
      @include wd(175px, 30px);
      margin-left: 18px;
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      font-size: 14px;
      padding-left: 8px;
      border: 1px solid rgba(223, 223, 223, 1);
    }
    .mycolor {
      position: absolute;
      margin-left: 54px;
    }
    .el-checkbox {
      margin-left: 10px;
    }
  }
  .opaqueness {
    @include flexCon(276px, 50px, center, space-between, 40px);
    justify-content: flex-start;
    .set-opaq {
      @include wd(86px, 30px);
      margin-left: 16px;
      border-radius: 3px;
      line-height: 30px;
      padding-left: 14px;
      display: flex;
      border: 1px solid rgba(223, 223, 223, 1);
      align-content: center;
      justify-content: space-between;
      .set-opaq-right {
        @include wd(28px, 28px);
        display: flex;
        flex-direction: column;
      }
    }
    .upimg {
      margin-left: 18px;
    }
  }
}
</style>
